<template>
    <view class="container" @click="toShopDetail()">
        <view class="image-container">
            <image mode="aspectFit" :src="merchantItem.logo_img_url"></image>
        </view>

        <view class="right-container">
            <view class="description-container">
                <view class="title-container">
                    <text class="title">{{merchantItem.name}}</text>
                </view>
                <text class="common">{{merchantItem.address}}</text>
                <text class="common">营业时间：{{merchantItem.business_start_time}}-{{merchantItem.business_end_time}}</text>
                <view>
                    <u-rate inactive-color='#ccc' :count="count" v-model="value" size="24" disabled></u-rate>
                </view>
            </view>

            <view class="distance-container">
                <text>{{merchantItem.distance}}</text>
            </view>
        </view>
    </view>
</template>

<script>

    export default {
        props: {
            merchantItem: '',
        },
        data() {
            return {
                count: 5,
                value: 4
            }
        },
        mounted() {

        },
        methods: {

            // 进入店铺详情页面
            toShopDetail() {
                const id = this.merchantItem.merchant_id
                const name = this.merchantItem.name
                wx.navigateTo({
                    url: `/pages/shopDetail/shopDetail?merchant_id=${id}&name=${name}`
                })
            },


        }
    }
</script>

<style lang="scss" scoped>

    .container{
        box-sizing: border-box;
        width: 100%;
        height: 220rpx;
        display:flex;
        flex-direction:row;
        padding:30rpx;
        border-top: 2rpx solid #f3f3f3;
        background-color: #ffffff;

        .image-container{
            height: 160rpx;
            width: 160rpx;
            margin-right:20rpx;
            image{
                height:100%;
                width:100%;
            }
        }

        .right-container {
            width: 100%;
            display:flex;
            flex-direction:row;
            justify-content: space-between;
            .description-container{
                width: 75%;
                display:flex;
                flex-direction:column;
                justify-content: space-between;
                .title{
                    font-weight: 700;
                    font-size:26rpx;
                    color:#333333;
                    line-height: 35rpx;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .common {
                    font-size: 24rpx;
                    color: #666;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                }
            }
            .distance-container{
                display:flex;
                flex-direction:row;
                justify-content: space-between;
                align-items: flex-start;
                font-size: 24rpx;
                color: #F90;
            }
        }

    }

</style>
